<template>
  <!-- 格式选择 -->
  <div class="section">
    <h3 class="section-title">选择输出格式</h3>
    <div class="format-grid">
      <div
        class="format-card"
        v-for="format in formats"
        :key="format.name"
        :class="{ selected: settingsStore.defaultFormat === format.name }"
        @click="settingsStore.defaultFormat = format.name"
      >
        <div class="flex items-center">
          <div class="format-icon" :class="format.iconBg">
            <div class="i-carbon-video" :class="format.iconColor"></div>
          </div>
          <span class="font-medium">{{ format.name }}</span>
        </div>
      </div>
    </div>
  </div>
  <div class="section">
    <h3 class="section-title">转换设置</h3>
    <div class="settings-panel">
      <div class="settings-grid">
        <div class="setting-item">
          <label class="setting-label">分辨率</label>
          <select class="setting-select" v-model="settingsStore.resolution">
            <option :value="Resolution.HD">720p (1280x720)</option>
            <option :value="Resolution.FHD">1080p (1920x1080)</option>
            <option :value="Resolution.QHD">1440p (2560x1440)</option>
            <option :value="Resolution.UHD">2160p (3840x2160)</option>
          </select>
        </div>
        <div class="setting-item">
          <label class="setting-label">码率</label>
          <select class="setting-select" v-model="settingsStore.bitrate">
            <option :value="Bitrate.LOW">低质量 (1 Mbps)</option>
            <option :value="Bitrate.MEDIUM">标准 (4 Mbps)</option>
            <option :value="Bitrate.HIGH">高质量 (8 Mbps)</option>
            <option :value="Bitrate.VERY_HIGH">超高质量 (12 Mbps)</option>
          </select>
        </div>
        <div class="setting-item">
          <label class="setting-label">帧率</label>
          <select class="setting-select" v-model="settingsStore.framerate">
            <option :value="Framerate.LOW">24 FPS</option>
            <option :value="Framerate.MEDIUM">30 FPS</option>
            <option :value="Framerate.HIGH">60 FPS</option>
          </select>
        </div>
        <div class="setting-item">
          <label class="setting-label">音频质量</label>
          <select class="setting-select" v-model="settingsStore.audioQuality">
            <option :value="AudioQuality.LOW">低质量 (64 kbps)</option>
            <option :value="AudioQuality.MEDIUM">标准 (128 kbps)</option>
            <option :value="AudioQuality.HIGH">高质量 (192 kbps)</option>
            <option :value="AudioQuality.VERY_HIGH">超高质量 (320 kbps)</option>
          </select>
        </div>
      </div>

      <!-- 输出路径设置 -->
      <div class="mt-6 border-t border-gray-100 pt-6">
        <div class="mb-4 flex items-center justify-between">
          <label class="setting-label mb-0">输出位置</label>
        </div>

        <div class="output-path-box" @click="showSavePathDialog = true">
          <div class="i-carbon-folder mr-2 text-gray-500"></div>
          <span v-if="settingsStore.outSavePath" class="truncate text-gray-900">{{
            settingsStore.outSavePath
          }}</span>
          <span v-else class="text-gray-500">未设置，点击选择保存位置</span>
        </div>
      </div>
    </div>
  </div>
  <!-- 保存路径对话框 -->
  <SavePathDialog
    v-model="showSavePathDialog"
    :savedPath="settingsStore.outSavePath"
    @path-selected="handleSavePathSelected"
  />
</template>
<script setup lang="ts">
  import { useSelectFilePath } from '@renderer/hooks/useSelectPath'
  import SavePathDialog from '@renderer/components/SavePathDialog.vue'
  import { useSettingsStore } from '@renderer/store/modules/settings.store'
  import {
    OutputFormat,
    Resolution,
    Bitrate,
    Framerate,
    AudioQuality
  } from '@renderer/enums/settingEnum'

  // 获取 settingsStore
  const settingsStore = useSettingsStore()

  // 输出格式选项
  const formats = [
    { name: OutputFormat.MP4, iconBg: 'bg-indigo-100', iconColor: 'text-indigo-600' },
    { name: OutputFormat.MOV, iconBg: 'bg-purple-100', iconColor: 'text-purple-600' },
    { name: OutputFormat.AVI, iconBg: 'bg-blue-100', iconColor: 'text-blue-600' },
    { name: OutputFormat.MKV, iconBg: 'bg-pink-100', iconColor: 'text-pink-600' }
  ]

  // 使用文件路径选择hook
  const { showPathDialog: showSavePathDialog } = useSelectFilePath({
    onPathSelected: (path) => {
      console.log('保存路径已选择:', path)
    },
    onError: (error) => {
      console.error('选择保存路径错误:', error.message)
    }
  })

  // 保存路径选择回调
  const handleSavePathSelected = (data: { path: string }) => {
    settingsStore.outSavePath = data.path
  }
</script>

<style lang="scss" scoped>
  .output-path-box {
    display: flex;
    align-items: center;
    padding: 0.75rem;
    cursor: pointer;
    background-color: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    transition: all 0.2s ease;

    &:hover {
      background-color: #f3f4f6;
    }
  }

  .section {
    margin-bottom: 2rem;
  }

  .section-title {
    margin-bottom: 1rem;
    font-size: 1.125rem;
    font-weight: 500;
    color: #1f2937;
  }

  .format-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;

    @media (width <= 768px) {
      grid-template-columns: repeat(2, 1fr);
    }

    @media (width <= 480px) {
      grid-template-columns: 1fr;
    }
  }

  .format-card {
    padding: 1rem;
    cursor: pointer;
    background-color: white;
    border: 1px solid #f3f4f6;
    border-radius: 0.5rem;
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 5%);
    transition: all 0.3s ease;

    &:hover {
      box-shadow: 0 10px 25px rgb(0 0 0 / 8%);
      transform: translateY(-4px);
    }

    &.selected {
      background-color: rgb(102 126 234 / 5%);
      border-color: #667eea;
    }
  }

  .format-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    margin-right: 0.75rem;
    border-radius: 9999px;
  }

  .settings-panel {
    padding: 1.25rem;
    background-color: white;
    border: 1px solid #f3f4f6;
    border-radius: 0.5rem;
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 5%);
  }

  .settings-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }

  .setting-item {
    width: 100%;
  }

  .setting-label {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #4b5563;
  }

  .setting-select {
    width: 100%;
    padding: 0.5rem 0.75rem;
    color: #1f2937;
    background-color: white;
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;

    &:focus {
      outline: none;
      border-color: #667eea;
      box-shadow: 0 0 0 3px rgb(102 126 234 / 10%);
    }
  }

  .action-bar {
    display: flex;
    justify-content: flex-end;

    @media (width <= 480px) {
      flex-direction: column;
      gap: 0.75rem;
    }
  }

  .primary-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1.25rem;
    font-weight: 500;
    color: white;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 0.5rem;
    transition: all 0.3s ease;

    &:hover {
      box-shadow: 0 5px 15px rgb(102 126 234 / 30%);
      transform: translateY(-2px);
    }
  }

  .secondary-btn {
    padding: 0.5rem 1.25rem;
    font-weight: 500;
    color: #4b5563;
    background-color: white;
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;

    &:hover {
      background-color: #f9fafb;
    }
  }

  .progress-bar {
    width: 100%;
    height: 4px;
    margin-top: 0.5rem;
    overflow: hidden;
    background-color: #e5e7eb;
    border-radius: 2px;

    .progress-bar-inner {
      height: 100%;
      background-color: #667eea;
      transition: width 0.3s ease;
    }
  }

  .completed-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem;
  }
</style>
